<script setup lang="ts">
import sideBar0 from '../components/sideBar0.vue'
import sideBar1 from '../components/sideBar1.vue'
import sideBar2 from '../components/sideBar2.vue'
import sideBar3 from '../components/sideBar3.vue'
import UserInfo from '../components/UserInfo.vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
var type = userStore.userInfo.type
</script>

<template>
  <el-container>
    <el-aside>
      <sideBar0 v-if="type == '0'"></sideBar0>
      <sideBar1 v-if="type == '1'"></sideBar1>
      <sideBar2 v-if="type == '2'"></sideBar2>
      <sideBar3 v-if="type == '3'"></sideBar3>
    </el-aside>
    <el-main>
      <UserInfo class="info" />
      <Suspense>
        <RouterView></RouterView>
      </Suspense>
    </el-main>
  </el-container>
</template>

<style scoped>
.el-aside {
  width: min-content;
  overflow-x: hidden;
}

.el-container {
  height: 100%;
}

.info {
  position: fixed;
  top: 20px;
  right: 50px;
  z-index: 1;
}
</style>
